<template>
    <div>
    <!-- 放款管理 -->
    <h3>合同信息</h3>
    <el-tabs v-model="activeName" class="demo-tabs">
        <!-- 借款需求 -->
        <el-tab-pane label="基本信息" name="first">
            <el-descriptions title="借款需求" :column="3" border>
                <template #default="tableData1" >
                <el-descriptions-item label="放款人信息" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htLenders"></el-descriptions-item>
                <el-descriptions-item label="开户机构" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htAccountbody"></el-descriptions-item>
                <el-descriptions-item label="付款账户" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htPaymentaccount"></el-descriptions-item>
                <el-descriptions-item label="合同编号" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htContractid"></el-descriptions-item>
                <el-descriptions-item label="签署日期" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htSignndate"></el-descriptions-item>
                <el-descriptions-item label="客户名称" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htCustomer"></el-descriptions-item>
                <el-descriptions-item label="签署地址" align="left" span="3"><input type="text"
                        style="width: 100%;border: none;" :value="tableData1.ht_signnadderss"></el-descriptions-item>
                <el-descriptions-item label="借款金额" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htAmounmoney"></el-descriptions-item>
                <el-descriptions-item label="产品名称" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htProductname"></el-descriptions-item>
                <el-descriptions-item label="还款方式" align="left"> <el-select v-model="value3" class="m-2"
                        :placeholder="tableData1.htRepaymentway">
                        <el-option v-for="item in options3" :key="item.value3" :label="item.label3" :value="item.value3" />
                    </el-select></el-descriptions-item>
                <el-descriptions-item label="期限类型" align="left"> <el-select v-model="value2" class="m-2"
                        :placeholder="tableData1.htTermtype">
                        <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" />
                    </el-select></el-descriptions-item>
                <el-descriptions-item label="期限" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htTerm"></el-descriptions-item>
                <el-descriptions-item label="月利率(%)" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htMonthrates"></el-descriptions-item>
                <el-descriptions-item label="手续费率(%)" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htPremiumrates"></el-descriptions-item>
                <el-descriptions-item label="违约率(%)" align="left"><input type="text" style="width: 100%;border: none;"
                        :value="tableData1.htBreachrates"></el-descriptions-item>
                <el-descriptions-item label="借款主体" align="left"><el-select v-model="value1" class="m-2"
                        :placeholder="tableData1.htAmounbody">
                        <el-option v-for="item in options1" :key="item.value1" :label="item.label1" :value="item.value1" />
                    </el-select></el-descriptions-item>
                <el-descriptions-item label="借款用途" align="left"><el-input v-model="textarea1"
                        :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" :placeholder="tableData1.htAmounusage"
                        :value="tableData1.htAmounusage" /></el-descriptions-item>
                </template>

            </el-descriptions>
            <!-- 银行账户信息 -->
            <p>
            <h4>银行账户信息<el-button class="xinzeng" @click="drawer1 = true"><el-icon>
                        <Plus />
                    </el-icon>新增</el-button></h4>
            </p>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column label="序号" width="80">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.$index + 1 }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="开户机构">
                    <template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.htAccountbody>
                    </template>
                </el-table-column>
                <el-table-column label="收款账户账号">
                    <template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.htAccountbody>
                    </template>
                </el-table-column>
                <el-table-column label="所属省分行">
                    <template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.htAccountbody>
                    </template>
                </el-table-column>
                <el-table-column label="所属市分行">
                    <template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.htAccountbody>
                    </template>
                </el-table-column>
                <el-table-column label="所属支行">
                    <template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.htAccountbody>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template #default="scope">
                        <el-icon style="color:rgb(78, 171, 254);" size="25" @click="yhshanchu(scope.row.htContractid)">
                            <Delete />
                        </el-icon>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 合同信息 -->
            <p>
            <h4>合同信息
                <el-button class="xinzeng" @click="drawer = true">
                    <el-icon>
                        <Plus />
                    </el-icon>新增
                </el-button>
            </h4>
            </p>
            <el-table :data="tableData2" border style="width: 100%">
                <el-table-column prop="date" label="序号" width="80">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.$index + 1 }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="合同名称"><template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.htContractname>
                    </template></el-table-column>
                <el-table-column label="备注"><template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.htRemark>
                    </template></el-table-column>
                <el-table-column label="文件大小"><template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.htFilesize>
                    </template></el-table-column>
                <el-table-column label="操作" width="80">
                    <template #default="scope">
                        <el-icon style="color:rgb(78, 171, 254);" size="25" @click="htshanchu(scope.row.htContractid)">
                            <Delete />
                        </el-icon>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="附件资料" name="second">
            <h4>申请附件 <el-button>打包下载</el-button></h4>
            <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="审批历史" name="third">
            <h4>审批历史</h4>
            <el-table :data="tableData3" border style="width: 100%">
                <el-table-column prop="date" label="序号" width="80">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span>{{ scope.$index + 1 }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="步骤"><template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.spSteps>
                    </template></el-table-column>
                <el-table-column label="经办人"><template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.spOperator>
                    </template></el-table-column>
                <el-table-column label="处理意见"><template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.spOpinion>
                    </template></el-table-column>
                <el-table-column label="意见内容"><template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.spOpinioncontent>
                    </template></el-table-column>
                <el-table-column label="处理时间"><template #default="scope">
                        <input type="text" style="border: none;" placeholder="请输入内容" :value=scope.row.spHandletime>
                    </template></el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="流程信息" name="fourth">
            <el-descriptions title="流程信息" :column="3" border>
                <el-descriptions-item label="处理意见" label-align="left" align="center" width="150px" span="3"><input
                        type="text" style="width: 100%;border: none;"></el-descriptions-item>
                <el-descriptions-item label="意见内容" label-align="left" align="center" span="3">
                    <el-input v-model="textarea2" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
                        placeholder="请输入内容" />
                </el-descriptions-item>
            </el-descriptions>
        </el-tab-pane>
        <!-- 合同信息抽屉 -->
        <el-drawer v-model="drawer" :with-header="false">
            <el-form :model="form" ref="formref">
                <el-form-item prop="htContractname" label="合同名称">
                    <el-input v-model="form.htContractname" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="htRemark" label="备注">
                    <el-input v-model="form.htRemark" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="htFilesize" label="文件大小">
                    <el-input v-model="form.htFilesize" placeholder="请输入" />
                </el-form-item>
                <el-form-item>
                    <el-button class="btn" type="primary" @click="htxinzeng(formref)">确定新增</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        <!-- 银行信息抽屉 -->
        <el-drawer v-model="drawer1" :with-header="false">
            <el-form :model="form" ref="formref1">
                <el-form-item prop="htAccountbody" label="开户机构">
                    <el-input v-model="form1.htAccountbody" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="htReceivingaccount" label="收款账户账号">
                    <el-input v-model="form1.htReceivingaccount" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="htProvincebranch" label="所属省分行">
                    <el-input v-model="form1.htProvincebranch" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="htMunicipalitybranch" label="所属市分行">
                    <el-input v-model="form1.htMunicipalitybranch" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="htSubbranch" label="所属支行">
                    <el-input v-model="form1.htSubbranch" placeholder="请输入" />
                </el-form-item>
                <el-form-item>
                    <el-button class="btn" type="primary" @click="yhxinzeng(formref1)">确定新增</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import type { UploadProps, UploadUserFile } from "element-plus";
import service from "@/apis/zxh";
import { ElNotification } from "element-plus";
import "element-plus/es/components/notification/style/css";

const drawer = ref(false);
const drawer1 = ref(false);


var tableData = ref([]);
var tableData1 = ref({});
var tableData2 = ref([]);
var tableData3 = ref([]);

onMounted(async () => {
  var res = await service.zxh.ht_Bankinfo();
  // console.log(res.data.data);
  tableData.value = res.data.data;
  var res = await service.zxh.ht_Contractid();
  // console.log(res.data.data[0]);
  tableData1.value = JSON.parse(JSON.stringify(res.data));
  // console.log(tableData1);
  var res = await service.zxh.ht_Proof();
  tableData2.value = res.data.data;
  var res = await service.zxh.sp_Approvalhistory();
  tableData3.value = res.data.data;
});

const activeName = ref("first");
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
const input = ref("");
const textarea1 = ref("");
const textarea2 = ref("");

const options1 = [
  {
    value1: "个人贷款",
    label1: "个人贷款",
  },
  {
    value1: "个体工商户",
    label1: "个体工商户",
  },
  {
    value1: "农村专业合作组织",
    label1: "农村专业合作组织",
  },
];
const options2 = [
  {
    value2: "年",
    label2: "年",
  },
  {
    value2: "月",
    label2: "月",
  },
  {
    value2: "日",
    label2: "日",
  },
];
const options3 = [
  {
    value3: "按月付息，到期还本",
    label3: "按月付息，到期还本",
  },
  {
    value3: "等额本息",
    label3: "等额本息",
  },
  {
    value3: "到期一次性还本付息",
    label3: "到期一次性还本付息",
  },
  {
    value3: "一次性付息，到期还本",
    label3: "一次性付息，到期还本",
  },
  {
    value3: "按日计息",
    label3: "按日计息",
  },
  {
    value3: "等额本金",
    label3: "等额本金",
  },
  {
    value3: "按月计息",
    label3: "按月计息",
  },
];

const fileList = ref<UploadUserFile[]>([
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
]);
// 分页
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

// 新增
var form = ref({
  htContractname: "",
  htFilesize: "",
  htContractid: 0,
  htRemark: "",
});
var formref = ref();
const htxinzeng = (formref:any) => {
  form.value.htContractid = form.value.htContractid;
  service.zxh.ht_Proof().then((res:any) => {
    // console.log(res);
    form.value.htContractid = res.data.data.length + 1;
    service.zxh.addht_Proof(form.value).then((res:any) => {
      // console.log(res);
      if (res.status == 200) {
        ElNotification.closeAll();
        ElNotification.success({ message: "新增成功!" });
        location.reload();
      } else {
        ElNotification.closeAll();
        ElNotification.error({ message: "新增失败!" });
      }
    });
  });
};

// 删除
const htshanchu = (id:any) => {
  service.zxh.scht_Proof({ id }).then((res) => {
    console.log(res);
    if (res.status == 200) {
      ElNotification.closeAll();
      ElNotification.success({ message: "删除成功!" });
      location.reload();
    } else {
      ElNotification.closeAll();
      ElNotification.error({ message: "删除失败!" });
    }
  });
};
// 银行新增
var form1 = ref({
  htAccountbody: "",
  htMunicipalitybranch: "",
  htContractid: 0,
  htProvincebranch: "",
  htReceivingaccount: "",
  htSubbranch: "",
});
var formref1 = ref();
const yhxinzeng = (formref1:any) => {
  form.value.htContractid = form.value.htContractid;
  service.zxh.ht_Proof().then((res:any) => {
    // console.log(res);
    form.value.htContractid = res.data.data.length + 1;
    service.zxh.addht_Bankinfo(form.value).then((res:any) => {
      // console.log(res);
      if (res.status == 200) {
        ElNotification.closeAll();
        ElNotification.success({ message: "新增成功!" });
        location.reload();
      } else {
        ElNotification.closeAll();
        ElNotification.error({ message: "新增失败!" });
      }
    });
  });
};
// 删除
const yhshanchu = (id:any) => {
  service.zxh.scht_Bankinfo({ id }).then((res) => {
    console.log(res);
    if (res.status == 200) {
      ElNotification.closeAll();
      ElNotification.success({ message: "删除成功!" });
      location.reload();
    } else {
      ElNotification.closeAll();
      ElNotification.error({ message: "删除失败!" });
    }
  });
};
</script>

<style scoped>
input:focus-visible {
  outline: none;
  border: none;
  box-shadow: 0 0 0 2px transparent;
  border-bottom: 1.3px solid gainsboro;
}
</style>